<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css阴影</title>
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
    <style>

        .box {
            display: flex;
            height: 100px;


        }

        .item{
            flex: 1;
            background-color: cadetblue;
            color: white;
            border-radius: 4px;
            font-size: 50px;
            margin-right: 20px;
            text-align: center;
            line-height: 100px;
        }

        #tooltip {
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 13px;

            transition: all 0.5s;
        }
    </style>
</head>

<body>

        <div id="box" class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>

        <div id="tooltip" role="tooltip">I'm a tooltip</div>
</body>

</html>

<script>
    const box = document.querySelectorAll('.item');
    const tooltip = document.querySelector('#tooltip');
  

    changePosition(2, 'bottom')

    function changePosition(index, pos){
        Popper.createPopper(box[index], tooltip, {
            placement: pos,
        });
    }
  </script>